/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
	<view class="page">
		<view class="bg"></view>

		<!-- 头部卡片 -->
		<view class="userInfo">
			<view class="infoBg" v-if="getBgSrc && getBgSrc.src">
				<image :src="getBgSrc.src" class="bgWrap"></image>

				<h1 class="vipInfo-name">{{vipInfo.rank_name}} LV{{vipInfo.rank}}</h1>
				<view class="points">{{$t('当前积分')}}: <span class="f36">{{vipInfo.integral?vipInfo.integral:'0'}}</span> </view>
				<view class="grade">
					<view class="box">
						<progress :percent="vipInfo.rank_percent" stroke-width="4" :activeColor="getBgSrc.color" active
							active-mode="backwards" />
						<image :src="getBgSrc.iconsrc" class="icon-vipsrc"></image>
						<text>{{vipInfo.next_rank_integral}}</text>
					</view>
					<view class="descripe">
						<text f24>{{vipInfo.rank_name}}</text>
						<text f24>{{$t('等级')}}:LV{{getRankNum}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部会员特权 -->
		<view class="gradeList">

			<h2 class="vipTitle">{{$t('升级贡献值,点亮更高权益')}}</h2>
			<view class="listBox">
				<view class="listItem" :class="{active: privilege.returns == 1}">
					<view class="icon">
						<image :src="imgStaticUrl+'/images/rank/icon-vipDay7@2x.png'"></image>
					</view>
					<view class="des f24 c3">{{$t('7天退换货')}}</view>
					<view class="label c9 f26">{{$t('会员LV1')}}</view>
				</view>
				<view class="listItem" :class="{active: privilege.customerService == 1}">
					<view class="icon">
						<image :src="imgStaticUrl+'/images/rank/icon-vipCustomer@2x.png'"></image>
					</view>
					<view class="des f24 c3">{{$t('专属客服')}}</view>
					<view class="label c9 f26">{{$t('会员LV1')}}</view>
				</view>
				<view class="listItem" :class="{active: privilege.identification == 1}">
					<view class="icon">
						<image :src="imgStaticUrl+'/images/rank/icon-vip@2x.png'"></image>
					</view>
					<view class="des f24 c3">{{$t('尊享标识')}}</view>
					<view class="label c9 f26">{{$t("会员LV2")}}</view>
				</view>
				<view class="listItem" :class="{active: privilege.holidayGift == 1}">
					<view class="icon">
						<image :src="imgStaticUrl+'/images/rank/icon-vipGift@2x.png'"></image>
					</view>
					<view class="des f24 c3">{{$t('节日礼物')}}</view>
					<view class="label c9 f26">{{$t("会员LV2")}}</view>
				</view>
				<view class="listItem" :class="{active: privilege.preemptive == 1}">
					<view class="icon">
						<image :src="imgStaticUrl+'/images/rank/icon-Activity@2x.png'"></image>
					</view>
					<view class="des f24 c3">{{$t('抢拍特权')}}</view>
					<view class="label c9 f26">{{$t("会员LV2")}}</view>
				</view>
				<view class="listItem" :class="{active: privilege.offlineActivity == 1}">
					<view class="icon">
						<image :src="imgStaticUrl+'/images/rank/icon--vipMark@2x.png'"></image>
					</view>
					<view class="des f24 c3">{{$t('线下活动')}}</view>
					<view class="label c9 f26">{{$t("会员LV2")}}</view>
				</view>


			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgStaticUrl: this.STATICURL,
				vipInfo: {},
				isActive: false,
				arrowSrc: '',
				bgList: [{
						color: '#6B696A',
						src: this.STATICURL + 'images/bg-ordinary@2x.png',
						iconsrc: this.STATICURL + 'images/icon-vipOrdinary@2x.png',
						bgIndex: 0,
					}, {
						color: '#5168A3',
						src: this.STATICURL + 'images/bg-silver@2x.png',
						iconsrc: this.STATICURL + 'images/icon-vipSilver@2x.png',
						bgIndex: 1,
					}, {
						color: '#FFB300',
						src: this.STATICURL + 'images/bg-gold@2x.png',
						iconsrc: this.STATICURL + 'images/icon-vipGold@2x.png',
						bgIndex: 2,
					}, {
						color: '#9B5025',
						src: this.STATICURL + 'images/bg-platinum@2x.png',
						iconsrc: this.STATICURL + 'images/icon-vipPlatinum@2x.png',
						bgIndex: 3,
					}, {
						color: '#824EB3',
						src: this.STATICURL + 'images/bg-diamond@2x.png',
						iconsrc: this.STATICURL + 'images/icon-vipDiamond@2x.png',
						bgIndex: 4,
					},
					{
						color: '#824EB3',
						src: this.STATICURL + 'images/bg-silver@2x.png',
						iconsrc: this.STATICURL + 'images/icon-vipDiamond@2x.png',
						bgIndex: 5,
					}
				],
				privilege: {}
			}
		},

		created() {
			this.getMemberInfo();
		},
		computed: {

			getRankNum() {
				let rankNum = parseInt(this.vipInfo.rank);
				return rankNum + 1;
			},
			getBgSrc() {
				let rankNum = parseInt(this.vipInfo.rank);
				return this.bgList[rankNum];

			}
		},
		methods: {
			getMemberInfo() {
				this.$http.getUserInfo().then(res => {
					this.vipInfo = res.data;
					console.log(this.vipInfo)
					this.privilege = this.vipInfo.privilege;
					this.getRankNum;
					this.getBgSrc;
				})
			},

		},
		onNavigationBarButtonTap() {
			this.getnav('/pagesB/article/detail?title='+this.$t('会员等级规则'));
		}
	}
</script>

<style lang="less">
	page {
		background: #fff;
	}

	.page {
		.bg {
			width: 750upx;
			height: 266upx;
			background-image: #333;
			background-size: cover;

		}

		.userInfo {
			padding: 0 32upx;
			position: relative;
			margin-top: -142px;
			height: 500rpx;

			.infoBg {
				width: 100%;
				height: 380upx;
				position: relative;
				background-size: cover;
				color: #fff;
				text-align: center;
				display: flex;
				flex-direction: column;
				padding-top: 80upx;
				align-items: flex-start;
				z-index: 2;

				.vipInfo-name {
					font-size: 38upx;
					font-weight: 500;
					margin: 40upx 40upx 0;

					.user-name {
						font-size: 28upx;
						font-weight: 400
					}
				}

				.bgWrap {
					position: absolute;
					width: 100%;
					height: 100%;
					z-index: -1;
				}

				.avatar {
					width: 120upx;
					height: 120upx;
					border: 4upx solid rgba(255, 255, 255, 0.4);
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.name {
					line-height: 40upx;
					margin-top: 27upx;
				}

				.points {
					margin-top: 8upx;
					margin-left: 40upx;
					line-height: 33upx;
				}
			}
		}

		.grade {
			padding: 0 32upx;
			width: 100%;

			.box {
				display: flex;
				margin-top: 90upx;
				align-items: center;

				.icon-vipsrc {
					width: 58upx;
					height: 42upx;
					margin: 0 8upx;
				}

				.progress {
					flex: 0 0 600upx;
					height: 6upx;
					background: rgba(216, 216, 216, 0.5);
					border-radius: 3px;

					.innerBox {
						height: 100%;
						width: 20%;
						background: rgba(235, 123, 24, 1);
						border-radius: 3upx;
						position: relative;

						.bubble {
							position: absolute;
							line-height: 33upx;
							font-size: 24upx;
							background: rgba(216, 216, 216, 1);
							color: #666;
							padding: 4upx 6upx;
							border-radius: 10upx;
							right: -43upx;
							top: -60upx;

							&::after {
								content: '';
								width: 0;
								height: 0;
								display: inline-block;
								border: 15upx solid transparent;
								border-top: 15upx solid rgba(216, 216, 216, 1);
								bottom: -23upx;
								left: 50%;
								transform: translate(-50%, 0);
								position: absolute;
							}

						}
					}
				}

				.gradebox {
					flex: 1;
					height: 36upx;
					background: #EEEEEE;
					align-items: center;
					display: flex;
					justify-content: space-between;

					.vip {
						width: 60upx;
						height: 50upx;
					}
				}
			}

			.descripe {
				display: flex;
				justify-content: space-between;
				margin-top: 18upx;

				text {
					color: #ffff;
				}
			}

		}

		.gradeList {
			padding-top: 33upx;
			border-top: 20upx solid rgba(248, 248, 248, 1);

			.title {
				line-height: 50upx;
				font-size: 36upx;
				color: #2B2B2B;
				display: flex;
				justify-content: space-between;

				.seerules {
					font-size: 28upx;
					color: #999999;
					display: flex;
					align-items: center;

					.arrowRight {
						width: 28upx;
						height: 28upx;
						display: inline-block;
					}
				}
			}

			.vipTitle {
				font-size: 36upx;
				text-align: center;
				padding: 0 30upx 30upx;
			}

			.listBox {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.listItem {
					margin-bottom: 50upx;
					display: flex;
					justify-content: center;
					width: 250upx;
					flex-direction: column;
					align-items: center;
					filter: opacity(0.8) grayscale(100%);

					&.active {
						filter: opacity(1) grayscale(0);
					}

					.icon {
						width: 94upx;
						height: 94upx;

						image {
							width: 100%;
							height: 100%;
						}

					}

					.des {
						line-height: 33upx;
						margin-top: 16upx;
					}

					.label {
						line-height: 37upx;
						margin-top: 8upx;
					}
				}
			}
		}
	}
</style>
